<script setup>
import learnCommunal from "@/components/communal/learn-communal.vue";
import searchUtil from "@/components/utils/search-util.vue";
import {h, inject} from "vue";
import {NIcon} from "naive-ui";
import {
  HeartOutline as HeartIcon,
  ChatboxEllipsesOutline as ChatboxEllipsesIcon,
  EyeOutline as EyeIcon,
  ChevronForwardSharp as ChevronForwardIcon
} from "@vicons/ionicons5"
import {BlogSelect, getAllBlogByPostType} from "@/res/api/blog_api.js";
const {toPage} = inject("toPage")
function toShowUrl() {
  toPage()
}
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

// 查询发布的文章
let type = ref(1)
let blogList = ref([])
onBeforeMount(() => {
  console.log("onBeforeMount")
  getAllBlogCilck()
})
function updataType(tabName) {
  switch (tabName){
    case "recommend":
      type.value = 1
      console.log(type.value)
      getAllBlogCilck()
      return true;
    case "popular":
      type.value = 2
      console.log(type.value)
      getAllBlogCilck()
      return true;
    case "attention":
      type.value = 3
      console.log(type.value)
      getAllBlogCilck()
      return true;
    case "private":
      type.value = 4
      console.log(type.value)
      getAllBlogCilck()
      return true;
    default:
      type.value = 0
      console.log(type.value)
      getAllBlogCilck()
      return true;
  }
}
function getAllBlogCilck(){
  getAllBlogByPostType({
    pageNum: 1,
    pageSize: 10,
    sortType: type.value
  }).then((res) => {
    // console.log(res.data.list)
    blogList.value = res.data.list
    console.log("blog: ")
    console.log(blogList.value)
  })
}
getAllBlogCilck()

// 论坛社区 关注 TODO：假数据
let attentionList = ref(['Java','Python','C++','R'])
let peopleList = ref(['我想要加班','我想要加大班','5555为什么要加班'])
</script>

<template>
  <learn-communal action-key="forum" :core="false" :top="true">
    <n-grid cols="9" x-gap="5" class="forum-flex-area layout-sider">
      <n-gi span="7" class="forum-flex-area-left">
        <n-card title="社区论坛" style="margin-bottom: 16px;background: rgba(198,222,244,.25);border-radius: 11px">
            <template #header-extra>
              <search-util/>
<!--              TODO：跳转到编辑页面-->
              <n-button type="info" style="margin-left: 1rem" @click="toPage('std/forum/write',{type:'posts'},false)">发布文章</n-button>
            </template>
            <n-tabs type="line" animated default-value="recommend" class="custom-tabs"
                    @before-leave="updataType" >
              <n-tab-pane name="recommend" tab="推荐">
                <n-card v-for="(item, index) in blogList" :key="index" style="margin-bottom: 1rem" hoverable
                        @click="toPage('std/forum/show',{postsId: item.id,uuid:item.uuid,type:'posts'},false)">
                  <n-flex vertical>
                    <n-space justify="space-between">
                      <n-space align="center">
                        <n-avatar round size="large" src="https://picsum.photos/200"/>
                        <n-tag :bordered="false" type="info" size="small">
                          用户id： {{ item.uuid }}
                        </n-tag>
                      </n-space>
                      <n-text>
                        <n-time/>
                      </n-text>
                    </n-space>

                    <n-space vertical>
                      <n-space>{{ item.title }}</n-space>
                      <n-space>
                        <n-tag type="info">python</n-tag>
                        <n-tag type="info">python</n-tag>
                      </n-space>
                    </n-space>

                    <n-space justify="space-between" align="center">
                      <n-space align="center">
                        <n-text tag="div" class="item-center hover-pointer">
                          <n-icon :component="HeartIcon" size="18"/>
                          {{ item.likesNub }}
                        </n-text>
                        <n-divider vertical/>
                        <n-text tag="div" class="item-center hover-pointer">
                          <n-icon :component="ChatboxEllipsesIcon" :size="18"/>
                          {{ item.commentsNub }}
                        </n-text>
                      </n-space>
                      <n-text tag="div" class="item-center">
                        <n-icon :component="EyeIcon" size="18"/>
                        {{ item.views }}
                      </n-text>
                    </n-space>

                  </n-flex>
                </n-card>
              </n-tab-pane>
              <n-tab-pane name="popular" tab="最热">
                <n-card v-for="(item,index) in blogList" :key="index" style="margin-bottom: 1rem"
                        @click="toPage('std/forum/show',{postsId: item.id,uuid:item.uuid,type:'posts'},false)">
                  <n-flex vertical>
                    <n-space justify="space-between">
                      <n-space align="center">
                        <n-avatar round size="large" src="https://picsum.photos/200"/>
                        <n-tag :bordered="false" type="info" size="small">
                          用户id： {{ item.uuid }}
                        </n-tag>
                      </n-space>
                      <n-text>
                        <n-time/>
                      </n-text>
                    </n-space>

                    <n-space vertical>
                      <n-space>{{ item.title }}</n-space>
                      <n-space>
                        <n-tag type="info">python</n-tag>
                        <n-tag type="info">python</n-tag>
                      </n-space>
                    </n-space>

                    <n-space justify="space-between" align="center">
                      <n-space align="center">
                        <n-text tag="div" class="item-center hover-pointer">
                          <n-icon :component="HeartIcon" size="18"/>
                          {{ item.likesNub }}
                        </n-text>
                        <n-divider vertical/>
                        <n-text tag="div" class="item-center hover-pointer">
                          <n-icon :component="ChatboxEllipsesIcon" :size="18"/>
                          {{ item.commentsNub }}
                        </n-text>
                      </n-space>
                      <n-text tag="div" class="item-center">
                        <n-icon :component="EyeIcon" size="18"/>
                        {{ item.views }}
                      </n-text>
                    </n-space>

                  </n-flex>
                </n-card>
              </n-tab-pane>
              <n-tab-pane name="attention" tab="关注">
                <n-card v-for="(item, index) in blogList" :key="index" style="margin-bottom: 1rem"
                        @click="toPage('std/forum/show',{postsId: item.id,uuid:item.uuid,type:'posts'},false)">
                  <n-flex vertical>
                    <n-space justify="space-between">
                      <n-space align="center">
                        <n-avatar round size="large" src="https://picsum.photos/200"/>
                        <n-tag :bordered="false" type="info" size="small">
                          用户id： {{ item.uuid }}
                        </n-tag>
                      </n-space>
                      <n-text>
                        <n-time/>
                      </n-text>
                    </n-space>

                    <n-space vertical>
                      <n-space>{{ item.title }}</n-space>
                      <n-space>
                        <n-tag type="info">python</n-tag>
                        <n-tag type="info">python</n-tag>
                      </n-space>
                    </n-space>

                    <n-space justify="space-between" align="center">
                      <n-space align="center">
                        <n-text tag="div" class="item-center hover-pointer">
                          <n-icon :component="HeartIcon" size="18"/>
                          {{ item.likesNub }}
                        </n-text>
                        <n-divider vertical/>
                        <n-text tag="div" class="item-center hover-pointer">
                          <n-icon :component="ChatboxEllipsesIcon" :size="18"/>
                          {{ item.commentsNub }}
                        </n-text>
                      </n-space>
                      <n-text tag="div" class="item-center">
                        <n-icon :component="EyeIcon" size="18"/>
                        {{ item.views }}
                      </n-text>
                    </n-space>

                  </n-flex>
                </n-card>
              </n-tab-pane>
              <n-tab-pane name="private" tab="个人">
                <n-card v-for="(item, index) in blogList" :key="index" style="margin-bottom: 1rem"
                        @click="toPage('std/forum/show',{postsId: item.id,uuid:item.uuid,type:'posts'},false)">
                  <n-flex vertical>
                    <n-space justify="space-between">
                      <n-space align="center">
                        <n-avatar round size="large" src="https://picsum.photos/200"/>
                        <n-tag :bordered="false" type="info" size="small">
                          用户id： {{ item.uuid }}
                        </n-tag>
                      </n-space>
                      <n-text>
                        <n-time/>
                      </n-text>
                    </n-space>

                    <n-space vertical>
                      <n-space>{{ item.title }}</n-space>
                      <n-space>
                        <n-tag type="info">python</n-tag>
                        <n-tag type="info">python</n-tag>
                      </n-space>
                    </n-space>

                    <n-space justify="space-between" align="center">
                      <n-space align="center">
                        <n-text tag="div" class="item-center hover-pointer">
                          <n-icon :component="HeartIcon" size="18"/>
                          {{ item.likesNub }}
                        </n-text>
                        <n-divider vertical/>
                        <n-text tag="div" class="item-center hover-pointer">
                          <n-icon :component="ChatboxEllipsesIcon" :size="18"/>
                          {{ item.commentsNub }}
                        </n-text>
                      </n-space>
                      <n-text tag="div" class="item-center">
                        <n-icon :component="EyeIcon" size="18"/>
                        {{ item.views }}
                      </n-text>
                    </n-space>

                  </n-flex>
                </n-card>
              </n-tab-pane>
            </n-tabs>
          </n-card>
      </n-gi>
      <n-gi span="2" class="forum-flex-area-right">
        <n-flex vertical>
          <n-space vertical class="forum-community">
            <n-h3 class="line line-h3">论坛社区</n-h3>
            <n-flex vertical>
              <n-space v-for="(item, index) in attentionList" justify="space-between" align="center" class="forum-community-item">
                  <n-space justify="center" align="center" :wrap="false">
                    <n-image :width="20" preview-disabled src="https://picsum.photos/seed/picsum/20/30"></n-image>
                    <n-ellipsis line-clamp="1" :tooltip="false">
                      {{ item }}
                    </n-ellipsis>
                  </n-space>
                  <n-button round type="info" size="small" color="#abbce2">加入</n-button>
              </n-space>
              <n-space justify="end" >
                <n-text class="item-center hover-pointer">
                  更多<n-icon :component="ChevronForwardIcon" size="18"/>
                </n-text>
              </n-space>
            </n-flex>
          </n-space>

          <n-space vertical class="forum-community">
            <n-h3 class="line line-h3">推荐关注</n-h3>
            <n-flex vertical>
              <n-grid v-for="(item, index) in peopleList" x-gap="8" cols="4" class="forum-community-item">
                <n-gi class="item-center">{{ index + 1 }}</n-gi>
                <n-gi span="2">
                  <n-space vertical>
                    <n-p>{{ item }}</n-p>
                  </n-space>
                </n-gi>
                <n-gi class="item-center">
                  <n-button round type="info" size="small" color="#abbce2">关注</n-button>
                  </n-gi>
              </n-grid>
              <n-space justify="end" >
                <n-text class="item-center hover-pointer">
                  更多<n-icon :component="ChevronForwardIcon" size="18"/>
                </n-text>
              </n-space>
            </n-flex>
          </n-space>

        </n-flex>
      </n-gi>
    </n-grid>
  </learn-communal>
</template>

<style lang="scss" scoped>
.forum-flex-area{
  width: 100%;
  box-sizing: border-box;
  padding: 0 2rem;
}
.forum-flex-area-left{
  box-sizing: border-box;
  padding: 1rem;
}
.forum-flex-area-right{

  padding: 2%;
  border-left: 1px solid #f2f2f2;
  box-sizing: border-box;
}
.forum-community{
  box-sizing: border-box;
  padding: 1rem;
  //border: 0.5px solid #aaa;
  color: #ffffff;
  height: auto;
  border-radius: .72rem;
  background: rgba(241, 246, 255,.81);
  &:nth-child(2){
    background: rgba(238, 247, 242,.81);
  }
  backdrop-filter: blur(10px);
  &-item{
    width: 100%;
    min-height: 3.2rem;
    box-sizing: border-box;
    padding: 0 1.2rem;
    background: linear-gradient(90deg, rgba(255, 61, 0, 0.096) 0%, rgba(153, 59, 29, 0.0555) 100%);
    border: 7.87px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(40.924px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 20px;
  }
}
.line{
  margin: 0;
  padding-bottom: 1rem;

}
.line-h3{
  font-weight: 800;
  font-size: 1rem;
}
</style>
